<template>
  	<div class="Homechir">
		<h2  class="tit">订单详情</h2>
		<div class="main">
			<p class="title">订单信息</p>	
			<!--  发货状态  -->
			<div class="Homechir-one">     
				<div style="width: 380px;float: left;border-right: 1px solid #E4E9EE;margin-top: 10px;">
					<p style="width: 350px;margin:0;margin-left: 20px;color: #242526;font-size: 13px;line-height: 30px;height: 30px;">订单号：{{order.orderNumber}}</p>
					<p style="width: 350px;margin:0;margin-left: 20px;color: #242526;font-size: 13px;line-height: 30px;height: 30px;">收款单位：{{order.merchantName}}</p>
					<p style="width: 350px;margin:0;margin-left: 20px;color: #242526;font-size: 13px;line-height: 30px;height: 30px;">支付方式: {{ order.tradingChannels === 0 ? '微信' : (order.tradingChannels === 1 ? '支付宝' : '线下支付') }}</p>
				</div>
				<div style="width: calc(100% - 480px);float: left;padding: 0 30px;margin: 20px 0 0 45px; ">
					<div class="time" style="width:100%;margin:0 auto 10px;padding:0">
						<span style="width:49%;display:inline-block;height:90%;line-height:26px;">{{order.createTime?order.createTime:''}}</span>
						<span style="width:50%;display:inline-block;height:90%;margin:auto;padding:0;line-height:26px;text-align:right">{{order.notifyTime?order.notifyTime:''}}</span>
					</div>
					<Steps :current="order.notifyTime ? 2 : (order.createTime ? 1 : 0)" align-center process-status="wait">	
						<Step title="订单生成时间" style="width: auto" icon="ios-checkmark"></Step>
						<Step title="支付时间" style="width: auto" icon="ios-checkmark"></Step>
					</Steps>
				</div>
			</div>
		</div>
		<div class="main">	
			<p class="title">预约信息</p>	
			<!--  预约信息  -->
			<div class="Homechir-sel" style="padding-top: 10px;min-height: 170px;margin-bottom: 20px">
				<div style="width: 380px;float: left;border-right: 1px solid #E4E9EE;">
					<p style="width: 350px;margin:0;margin-left: 20px;color: #242526;font-size: 13px;line-height: 30px;height: 30px;">预约类别: {{ businessObj.itemType ? businessObj.itemType : '暂无预约类别' }}</p>
					<p style="width: 350px;margin:0;margin-left: 20px;color: #242526;font-size: 13px;line-height: 30px;height: 30px;">预约时间: {{ businessObj.yydate ? businessObj.yydate:'暂无预约时间'}}</p>
					<p style="width: 350px;margin:0;margin-left: 20px;color: #242526;font-size: 13px;line-height: 30px;height: 30px;">预约时段: <span v-if="businessObj.startTime && businessObj.endTime">{{ businessObj.startTime }}-{{businessObj.endTime }}</span> <span v-else>暂无预约时段</span></p>
					<p style="width: 350px;margin:0;margin-left: 20px;color: #242526;font-size: 13px;line-height: 30px;height: 30px;">患者姓名: {{ businessObj.memberName ? businessObj.memberName : '暂无患者姓名' }}</p>
					<!-- <p style="width: 350px;margin:0;margin-left: 20px;color: #242526;font-size: 13px;line-height: 30px;height: 30px;">状态: <span style="color: red;">{{ refund.orderStatus ? refund.orderStatus : '暂无状态' }}</span></p> -->
					<p style="width: 350px;margin:0;margin-left: 20px;color: #242526;font-size: 13px;line-height: 30px;height: 30px;">状态: <span style="color: red;">{{ refund.orderStatus === 0 ? '申请中' : (refund.orderStatus === 1 ? '已退款' : (refund.orderStatus === 2 ? '拒绝退款' : (refund.orderStatus === 3 ? '退款中' : '同意退款'))) }}</span></p>
				</div>
				<div style="width: calc(100% - 382px);float: left;">
					<!-- <div style="width: 90%;margin: 10px auto;text-align: center">
						<Table
						:columns="columns1"
						:data="data2"
						border
						style="width: 100%;text-align: center"
						></Table>
					</div> -->
					
					<div style="width: 90%;margin: 0 auto;text-align: center;margin-top:20px">
						<div style="width: 100%;display: flex;flex-direction: row;border: 1px solid #E8E8E8;">
							<p style="background-color: #FAFAFA;margin: 0;width: 34%;height: 50px;line-height: 50px;border-right: 1px solid #E8E8E8;">项目名称</p>
							<p style="background-color: #FAFAFA;margin: 0;width: 33%;height: 50px;line-height: 50px;border-right: 1px solid #E8E8E8;">单位</p>
							<p style="background-color: #FAFAFA;margin: 0;width: 33%;height: 50px;line-height: 50px;border-right: 1px solid #E8E8E8;">单价（元）</p>
							<p style="background-color: #FAFAFA;margin: 0;width: 33%;height: 50px;line-height: 50px;border-right: 1px solid #E8E8E8;">数量</p>
							<p style="background-color: #FAFAFA;margin: 0;width: 33%;height: 50px;line-height: 50px;border-right: 1px solid #E8E8E8;">金额（元）</p>
						</div>
						<div style="width: 100%;display: flex;flex-direction: row;border: 1px solid #E8E8E8;" >
							<p style="margin: 0;width: 34%;height: 50px;line-height: 50px;border-right: 1px solid #E8E8E8;">{{businessObj.itemName}}</p>
							<p style="margin: 0;width: 33%;height: 50px;line-height: 50px;border-right: 1px solid #E8E8E8;">{{businessObj.chargeUnitName}}</p>
							<p style="margin: 0;width: 33%;height: 50px;line-height: 50px;border-right: 1px solid #E8E8E8;">{{businessObj.examFee ? businessObj.examFee : '免费'}}</p>
							<p style="margin: 0;width: 33%;height: 50px;line-height: 50px;border-right: 1px solid #E8E8E8;">1</p>
							<p style="margin: 0;width: 33%;height: 50px;line-height: 50px;">{{businessObj.examFee ? businessObj.examFee : '免费'}}</p>
						</div>
						<!-- <div style="width: 100%;display: flex;flex-direction: row;border: 1px solid #E8E8E8;" >
							<p style="margin: 0;width: 40.5%;height: 50px;line-height: 50px;border-right: 1px solid #E8E8E8;">总计</p>
							<p style="margin: 0;width: 59.5%;height: 50px;line-height: 50px;border-right: 1px solid #E8E8E8;">666</p>
						</div> -->
					</div>

				</div>
			</div>
		</div>
		<div class="main">
			<p class="title">退款信息</p>
			<!--  退款信息  -->
			<div class="Homechir-sel" style="display: flex;flex-direction: row;min-height: 225px">
				<div style="width: 380px;border-right: 1px solid #E4E9EE;padding-bottom: 10px">
					<p style="width: 350px;margin:0;margin-top: 10px;margin-left: 20px;color: #242526;font-size: 13px;line-height: 22px;height: 22px;">订单编号: {{ refund.orderNumber }}</p>
					<p style="width: 350px;margin:0;margin-left: 20px;color: #242526;font-size: 13px;line-height: 30px;height: 30px;">退款发起: 用户发起</p>
					<p style="width: 350px;margin:0;margin-left: 20px;color: #242526;font-size: 13px;line-height: 30px;height: 30px;">退款人: {{ businessObj.memberName ? businessObj.memberName : '暂无退款人' }}</p>
					<p style="width: 350px;margin:0;margin-left: 20px;color: #242526;font-size: 13px;line-height: 30px;height: 30px;">联系电话: {{ businessObj.memberPhone ? businessObj.memberPhone : '暂无联系电话' }}</p>
					<p style="width: 350px;margin:0;margin-left: 20px;color: #242526;font-size: 13px;line-height: 22px;word-wrap:break-word;">退款原因: {{ refund.reason }}</p>
					<p style="width: 350px;margin:0;margin-left: 20px;color: #242526;font-size: 13px;line-height: 30px;height: 30px;">退款时间: {{ refund.createTime	 }}</p>
					<p v-if="refund.auditorReason" style="width: 350px;margin:0;margin-left: 20px;color: #242526;font-size: 13px;line-height: 25px;text-overflow: ellipsis;white-space: nowrap;overflow:hidden;" :title= 'refund.auditorReason'>驳回原因: {{ refund.auditorReason }}</p>
				</div>
				<div style="width: calc(100% - 380px);padding: 0 30px">
					<p style="width: 95%;color: #F56C6C;height: 60px;line-height: 60px;font-size: 20px;font-weight:500;text-align: left">退款申请进度</p>
					<div class="time" style="width:100%;margin:0 auto 10px;padding:0">
						<span style="width:33%;display:inline-block;height:90%;line-height:26px;">{{refund.createTime?refund.createTime:''}}</span>
						<span style="width:33%;display:inline-block;height:90%;margin:auto;padding:0;line-height:26px;text-align:center">{{refund.auditorTime?refund.auditorTime:''}}</span>
						<span style="width:33%;display:inline-block;height:90%;margin:auto;padding:0;line-height:26px;text-align:right">{{refund.auditorTime?refund.auditorTime:''}}</span>
					</div>
					<Steps :current="refund.auditorTime ? 2 : (refund.auditorTime ? 1 : 0)" align-center process-status="wait">
						<Step title="申请退款时间" style="width: auto" icon="ios-checkmark"></Step>
						<Step title="运营端管理" style="width: auto" icon="ios-checkmark" :content="refund.auditorTime?refund.auditor:''" ></Step>
						<Step v-if="refund.orderStatus === 1 || refund.orderStatus === 0" title="退款到账时间" style="width: auto" icon="ios-checkmark"></Step>
						<Step v-if="refund.orderStatus === 2" title="拒绝退款" style="width: auto" icon="ios-checkmark"></Step>
					</Steps>
				</div>
			</div>
		</div>
		<div style="width: 100%;height:80px;line-height: 80px;margin-top: 10px; text-align:center;border-top:1px dashed #999">
			<Button v-if="refund.orderStatus === 0 " type="error" style="margin-right: 20px" @click="refuse">
				<i class = "iconfont icon-butongyi" style="font-size:14px;margin-right:5px"></i>拒绝
			</Button>
			<Button v-if="refund.orderStatus === 0 " type="primary" @click="handleFeeBack" style="margin-right: 20px">
				<Icon type="ios-checkmark" style="margin-right: 5px" /> 同意
			</Button>
			<Button @click="handlebacks">
				<i class = "iconfont icon-butongyi" style="font-size:14px;margin-right:5px"></i>关闭
			</Button>
		</div>
		<Modal
		v-model="fundcode"
		title="拒绝原因"
		:footer="null">  
			<Input type="textarea" v-model="refund.auditorReason" maxlength="200" placeholder="请输入具体拒绝原因"/>
			<div slot="footer">
				<div class="btn-group" style="text-align:center">
					<Button type="primary" @click="handleFeeBack" style="margin-right: 20px">
						<Icon type="ios-checkmark" style="margin-right: 5px" />确认
					</Button>
					<Button @click="fundcode = false">
						<i class = "iconfont icon-butongyi" style="font-size:14px;margin-right:5px"></i>取消
					</Button>		
				</div>
			</div>
		</Modal>
  	</div>
</template>

<script>
import api from "@/api/commonApi";
export default {
  name: 'Phachir',
  data() {
    return {
      distriStatus: null,
      fundcode: false,
      count: {},
      data2: {},
      columns1: [
        { title: "项目名称", key: "itemName", align: "center"},
        { title: "单位", key: "chargeUnitName", align: "center"},
        { title: "单价（元）", key: "price", align: "center"},
        { title: "数量", key: "1", align: "center"},
        { title: "金额（元）", key: "ypjx", align: "center"},
      ],
	  auditorReason: '',
	  businessObj: {},
	  order: {},
	  refund: {},
	  id: ''
    }
  },
  created () {
    let breadList = [
      { path: "/index", title: "首页" },
      {
        path: "",
        title: "退费审批管理"
      },
      {
        path: "operation/prescriptionmanage/ordersearch/review",
        title: "处方退费"
      }
    ];
    this.$emit("changeBreadList", breadList);
  },
  mounted () {
    this.distriStatus = parseInt(localStorage.getItem('orderStatus'));
    this.ishomeget();
  },
  methods: {
	refuse() {
		// 处理申请按钮
    	this.fundcode = true
	},
    handleFeeBack() {
		if (this.fundcode == true && !this.refund.auditorReason) {
			this.$Message.error('请填写拒绝原因');
		} else if (this.fundcode == true && this.refund.auditorReason){		
			if(this.refund.orderStatus == 0 ){
				this.refund.orderStatus = 2      //拒绝退款
			} 			
		} else {
			if(this.refund.orderStatus == 0 ){
				this.refund.orderStatus = 4       //退款中
			} 
		}
        const reqBody = { 
			auditorReason : this.refund.auditorReason,
			orderStatus : this.refund.orderStatus
		};
        this.$axios.post(api.RefundAuditor.replace('{id}', this.$route.query.id), reqBody).then(resp => {
			console.log(reqBody)
			this.$Message.success('操作成功');
			this.$router.back();
        	}).catch(err => {
        });
    },
    ishomeget () {
      const map = {
		id: this.$route.query.id,
	  }
	  console.log('入参 ',map)
	this.$axios
        .post(api.showDetailByRefundId, map)
        .then(res => {
          if (res.data.code === 1) {
				if(res.data.object){
						this.businessObj = res.data.object.businessObj;
						this.order = res.data.object.order;
						this.refund = res.data.object.refund;
						if(this.businessObj.itemType == '1'){
							this.businessObj.itemType = '检验预约'
						} else if(this.businessObj.itemType == '2') {
							this.businessObj.itemType = '检查预约'
						} else if(this.businessObj.itemType == '3') {
							this.businessObj.itemType = '体检预约'
						} else if(this.businessObj.itemType == '4') {
							this.businessObj.itemType = '手术预约'
						}
				}
			// if(this.refund.orderStatus == 0){
			// 	this.refund.orderStatus = '申请中'
			// } else if(this.refund.orderStatus == 1) {
			// 	this.refund.orderStatus = '已退款'
			// } else if(this.refund.orderStatus == 2) {
			// 	this.refund.orderStatus = '拒绝退款'
			// } else if(this.refund.orderStatus == 3) {
			// 	this.refund.orderStatus = '退款中'
			// } else if (this.refund.orderStatus == 4) {
			// 	this.refund.orderStatus = '同意退款'
			// }

          } else {
            this.$Message.error("请求异常");
          }
        })
    },
    handleExporDetail() {
      // 处理申请按钮
      this.fundcode = true
    },
    handlebacks() {
      localStorage.removeItem('orderStatus')
      this.$router.back()
    }
  }
}
</script>

<style lang="less" scoped>
  .ivu-steps {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    font-size: 0;
    line-height: 1.5;
  }
  .ivu-steps-item:last-child{
    flex: none !important;
  }
  .Homechir .ivu-steps-item{
    display: inline-block;
    position: relative;
    vertical-align: top;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    overflow: hidden;
  }
.Homechir {
	padding: 15px 0; 
	width: 100%;
	background: #ffffff;
	box-sizing: border-box;
	.tit {
		margin:10px 0;
		font-weight:bold;
		text-align:center;
	}
	.main{
        width: 98%;
        display: flex;
        flex-direction: column;
        margin: 10px auto;
        border: 1px solid #f0f0f0;
        box-shadow: 0 4px 3px #ebedf8;
        border-radius: 5px;
        margin-bottom: 20px;
        .title {
            font-size: 20px;
            padding-left: 15px;
            margin-bottom: 20px;
            color: #333;
            height: 40px;
            line-height: 40px;
            background: #ebedf8;   
        }      
        .w-select {
            width: 100px;
        }
        .box{
            padding: 0 30px;
        }
    }
    .Homechir-one,
    .Homechir-sel{
		width: calc(100% );
		margin: auto;
		min-height: 130px;
		background-color: white;
	}
	.btn{
        width: 100%;
        text-align: center;
        margin-bottom: 10px;
    }
}  	
</style>
